<template>
  <header class="PageHeader">
    <section class="goback" @click="$router.go(-1)">
      <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1">
        <polyline points="12,18 4,9 12,0" style="fill:none;stroke:rgb(255,255,255);stroke-width:2"></polyline>
      </svg>
    </section>
    <img class="bgcover" :src="shop.avatar">
    <div class="inner">
      <router-link class="detail" to="/shop/shopDetail">
        <div class="shop-avatar">
          <img :src="shop.avatar">
        </div>
        <div class="shop-info">
          <h4 class="ellipsis">{{shop.name}}</h4>
          <p>商家配送／{{shop.order_lead_time}}分钟送达／配送费¥{{shop.float_delivery_fee}}</p>
          <p>公告：{{shop.notice}}</p>
        </div>
        <svg class="arrow" width="14" height="14" xmlns="http://www.w3.org/2000/svg" version="1.1">
          <path d="M0 0 L8 7 L0 14" stroke="#fff" stroke-width="1" fill="none"></path>
        </svg>
      </router-link>

      <div class="activities" v-if="shop.activities.length > 0" @click="shop.showActivitiesDetail()">
        <p class="ellipsis" style="width:80%">
          <span class="icon" :style="iconStyle('#'+shop.activities[0].icon_color)">{{shop.activities[0].icon_name}}</span>
          <span>{{shop.activities[0].description}}（APP专享）</span>
        </p>
        <p>{{shop.activities.length}}个活动</p>
        <svg class="arrow" width="14" height="14" xmlns="http://www.w3.org/2000/svg" version="1.1">
          <path d="M0 0 L8 7 L0 14" stroke="#fff" stroke-width="1" fill="none"></path>
        </svg>
      </div>
    </div>
  </header>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: ['shop'],
  computed: {},
  methods: {
    iconStyle(color) {
      return { backgroundColor: color, borderColor: color };
    }
  }
};
</script>

<style lang="scss">
.PageHeader {
  position: relative;
  overflow: hidden;
  .bgcover {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
    filter: blur(10px);
  }
  .goback {
    position: fixed;
    top: 0;
    left: 0;
    width: 1rem;
    height: 1.2rem;
    z-index: 11;
    padding: 0.1rem 0.2rem;
  }

  .inner {
    position: relative;
    width: 100%;
    padding: 0.4rem 0 0.4rem 0.4rem;
    background-color: rgba(119, 103, 137, 0.43);
    z-index: 10;
    .detail {
      display: flex;

      .shop-avatar {
        margin-right: 0.3rem;

        img {
          display: block;
          width: 2.9rem;
          height: 2.9rem;

          border-radius: 0.15rem;
        }
      }

      .shop-info {
        flex: 1;
        color: #fff;
        h4 {
          font-size: 0.8rem;
          font-weight: 700;
        }
        p {
          margin-top: 0.3rem;
          font-size: 0.5rem;
        }
      }
      .arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 0.3rem;
      }
    }

    .activities {
      display: flex;
      justify-content: space-between;
      margin-top: 0.5rem;
      color: #fff;
      font-size: 0.5rem;
      padding-right: 1.2rem;

      .icon {
        padding: 0 0.02rem;
        display: inline-block;
        line-height: 0.6rem;
        border: 0.025rem solid #fff;
        border-radius: 0.1rem;
        color: #fff;
        margin-right: 0.2rem;
      }

      .arrow {
        position: absolute;
        right: 0.3rem;
      }
    }
  }
}
</style>
